<template>
  <view class="normal-login-container">
    <view class="title">
      <text class="text-xxl">欢迎登录</text>
    </view>
    <view class="login-form-content">
      <view class="input-item">
        <view class="input-label font-34">工号</view>
        <input
          v-model="loginForm.username"
          class="input"
          type="text"
          placeholder="请输入工号"
          maxlength="30"
        />
      </view>
      <view class="input-item">
        <view class="input-label font-34">密码</view>
        <input
          v-model="loginForm.password"
          type="password"
          class="input"
          placeholder="请输入密码"
          maxlength="20"
        />
      </view>
      <view class="action-btn">
        <button
          @click="handleLogin"
          class="login-btn cu-btn block bg-blue lg round"
        >
          登录
        </button>
      </view>
      <!-- <view class="flex loginBottom">
        <span @click="jump('/pages/codeLogin/index')">手机号登陆</span>
        <span @click="jump('/pages/changePassword/getCode/index')"
          >忘记密码</span
        >
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      globalConfig: getApp().globalData.config,
      loginForm: {
        username: "",
        password: "",
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let that = this
      uni.getStorage({
        key: "userOrPassword",
        success: function (res) {
          console.log(res.data);
          let { username, password } = res.data;
          that.loginForm.username = username;
          that.loginForm.password = password;
        },
      });
    },
    // 登录方法
    async handleLogin() {
      if (this.loginForm.username === "") {
        this.$modal.msgError("请输入账号");
      } else if (this.loginForm.password === "") {
        this.$modal.msgError("请输入密码");
      } else {
        this.$modal.loading("登录中，请耐心等待...");
        this.pwdLogin();
      }
    },
    // 密码登录
    async pwdLogin() {
      this.$store
        .dispatch("user/Login", this.loginForm)
        .then(() => {
          this.$modal.closeLoading();
          this.loginSuccess();
        })
        .catch(() => {});
    },
    // 登录成功后，处理函数
    loginSuccess() {
      // 设置用户信息
      uni.setStorage({
        key: "userOrPassword",
        data: this.loginForm,
      });
      this.$store.dispatch("user/GetInfo").then((res) => {
        this.$tab.reLaunch("/pages/home/index");
      });
    },
    jump(url) {
      this.$tab.navigateTo(url);
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

.normal-login-container {
  width: 100%;
  padding: 15%;
  font-weight: 700;
  .title {
    width: 100%;
    padding-top: 15%;
  }

  .login-form-content {
    margin-top: 15%;
    .input-item {
      margin: 20px auto;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      .input-label {
        margin-bottom: 20px;
      }
      .input {
        width: 100%;
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
        text-align: left;
      }
    }
    .login-btn {
      margin-top: 40px;
      height: 45px;
    }
  }
  .loginBottom {
    justify-content: space-between;
    padding: 30upx 0;
    font-weight: 400;
  }
}
</style>
